<template>
    <div class="houseSure">
        <button v-if="screen" class="sureBtn" @click="selectSure">确定</button>
        <div v-else class="screenBtn">
            <button class="cancel" @click="cancel">清空</button>
            <button class="sure" @click="sure">确定</button>
        </div>
    </div>
</template>

<script>
import {useRouter} from 'vue-router'
import {getHouseDatum} from '../../api/getDatum.js'
import { defineComponent , reactive, ref , onMounted, nextTick} from 'vue'
import {bus} from '../../utils/Bus'
export default defineComponent({
  //接收上级传递的参数 
  props:['tit','cancelBtn','selectProps','select'],
  setup(props,context) {
    let router = useRouter();
    let screen = ref(true);
    let houseLis = reactive({
        lis:[]
    })

    // 获取本地标题数据
    let selectHouse = ref(localStorage.getItem('House'));
    let getDat = async () => {
        const data = await getHouseDatum();
        console.log(data,'data');
        houseLis.lis = data.data.list;
    }
    // 判断标题
    if(props.tit === '筛选'){
        screen.value = false;
    }
    console.log(props,'props');

    const selectArea = () => {
        houseLis.lis = houseLis.lis.filter(item => {
            return item.house_title.indexOf(props.select) !== -1;
        })
    }

    const selectRooms = () => {
        
    }
    
    // 筛选逻辑跳转路由
    const selectSure = () => {
       localStorage.setItem('select',JSON.stringify(props.select));
       console.log(props.tit);
        // 标题为新房
        if(selectHouse.value === '新房'){
            if(props.tit === '区域筛选'){
                selectArea();
                nextTick(() => {
                    bus.emit('selectSure',houseLis.lis);
                    localStorage.setItem('houseSear',JSON.stringify(houseLis.lis));
                    router.push('/newHouse');
                })
            }else if(props.tit === "户型筛选"){
                    localStorage.setItem('roomTy',JSON.stringify(props.select));
                    router.push('/newHouse')
            }
            
        }
        // 标题为二手房
        else if(selectHouse.value === '二手房'){
            return router.push('/secondRoom')  
        }
        // 标题为出租房
        else if(selectHouse.value === '出租房'){
            return router.push('/rentOut')
        }
    }

    // 筛选清空数据
    const cancel = () => {
        context.emit('cancelBtn',null)
    }

    // 筛选选择筛选
    const sure = () => {
        localStorage.setItem('scree',JSON.stringify(props.selectProps));
        // 标题为新房
        if(selectHouse.value === '新房'){
            return router.push({path:'/newHouse'})
        }
        // 标题为二手房
        else if(selectHouse.value === '二手房'){
            return router.push({path:'/secondRoom'})  
        }
        // 标题为出租房
        else if(selectHouse.value === '出租房'){
            return router.push({path:'/rentOut'})
        }
    }
    onMounted(() => {
        // bus.on('selectIndex',(val) => {
        //     console.log(val,'val');
        // });
        getDat();

    })
      return {    
        selectSure,
        screen,
        cancel,
        sure  
      }
  },
})
</script>

<style lang='less' scoped>
.houseSure{
        width: 100%;
        height: 64px;
        .sureBtn{
            width: 100%;
            height: 100%;
            background: #ea655e;
            color: #fff;
            border: none;
            outline: none;
        }
        .screenBtn{
            width: 100%;
            height: 100%;
            background: #ea655e;
            color: #fff;
            border: none;
            outline: none;
            button{
                width: calc(100% / 2);
                height: 100%;
                border: none;
                outline: none;
            }
            .cancel{
                border: 1px solid #ccc;
                color: #333;
                background: #fff;
            }
            .sure{
                background: #ea655e;
                color: #fff;
            }
        }
    }
</style>
